<template>
  <div>
    <ElSelect v-model="dept" value-key="deptId" @change="linkQuery" v-loading="loading">
      <ElOption v-for="d in list" :key="d.deptId" :value="d" :label="d.deptName"></ElOption>
    </ElSelect>

    <ElSelect v-model="employee" value-key="employeeId" v-loading="loading">
      <ElOption v-for="d in linklist" :key="d.employeeId" :value="d" :label="d.employeeName"></ElOption>
    </ElSelect>

    <span> 结果：{{ dept.deptName }}-{{ employee.employeeName }} </span>
  </div>
  <hr />
  <div>
    <ElTable :data="linklist" v-loading="loading">
      <ElTableColumn label="编号" prop="employeeId"></ElTableColumn>
      <ElTableColumn label="员工姓名" prop="employeeName"></ElTableColumn>
      <ElTableColumn label="手机号" prop="phone"></ElTableColumn>
      <ElTableColumn label="信息最后修改时间">
        <template #default="scope">
          {{ Tools.formatDate(scope.row.lastupdate) }}
        </template>
      </ElTableColumn>
    </ElTable>
  </div>
</template>
<script setup lang="ts">
//#region  基础导入和变量
// vue核心
import { ref } from 'vue'
// 饿了么组件
import { ElMessage, ElSelect, ElOption, ElTable, ElTableColumn } from 'element-plus'
import { ApiService } from '../../ts/ApiService'
import { BaseDataResult } from '../../ts/types/BaseResult'
import { TbDept, TbEmployee } from '../../ts/types/Link'
import Tools from '../../ts/Tools'
const loading = ref(false)
//#endregion

//#region 省份查询
const list = ref([] as Array<TbDept>)
const dept = ref({} as TbDept)
const query = () => {
  loading.value = true
  ApiService.get('/link/departments', {}, (data: BaseDataResult<Array<TbDept>>) => {
    loading.value = false
    if (data.success) {
      list.value = data.data
      dept.value = data.data[0]
      linkQuery()
    } else {
      ElMessage.error(data.message)
    }
  })
}

query()

//#endregion

//#region 城市查询
const linklist = ref([] as Array<TbEmployee>)
const employee = ref({} as TbEmployee)
const linkQuery = () => {
  loading.value = true
  ApiService.get(`/link/employees/${dept.value.deptId}`, {}, (data: BaseDataResult<Array<TbEmployee>>) => {
    loading.value = false
    if (data.success) {
      linklist.value = data.data
      employee.value = data.data[0]
    } else {
      ElMessage.error(data.message)
    }
  })
}

//#endregion
</script>
<style scoped lang="scss"></style>
